.detail-bg {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  .swiper-box {
    width: 100%;
    height: 265px;
  }
  .topPic{
    width: 100%;
    height: 265px;
  }
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-bottom: 50px;
    box-sizing: border-box;
    .talent-box {
      width: 100%;
      background: #ffffff;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      margin-bottom: 12px;
      .step {
        width: 100%;
        height: 57px;
        margin-top: 10px;
      }
    }
    .talent-name {
      .title {
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        color: #333333;
      }
      .tit_con{
        vertical-align: middle;
      }
      .menu-list {
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 11px;
        font-weight: 400;
        color: #666666;
        padding-top: 14px;
        .menu-item {
          display: flex;
          align-items: center;
          outline: none;
          background-color: transparent;
          font-size: 11px;
          color: #666;
          font-weight: 400;
          width: auto;
          padding: 0;
          margin: 0;
          .nut-icon {
            margin-right: 2px;
          }
        }
      }
    }

    .task-item {
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #000000;
      line-height: 25px;
      .name {
        color: #666666;
        padding-right: 13px;
      }
      .name1 {
        padding-right: 13px;
      }
    }

    .task-t-item {
      font-size: 12px;
      font-weight: 400;
      text-align: left;
      color: #333333;
      line-height: 25px;
      display: flex;
      align-items: center;
      .text {
        width: 33%;
      }
      .money {
        color: #ec1313;
      }
      .text1 {
        text-align: right;
      }
    }

    .info-title {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: bold;
      color: #333333;
      line-height: 18px;
      margin-bottom: 5px;
    }
    .info-title::before {
      content: "";
      width: 3px;
      height: 15px;
      display: block;
      background: linear-gradient(0deg, #2a5cff 0%, #3581ff 100%);
      border-radius: 1.5px;
      margin-right: 5.5px;
    }

    .info-detail {
      padding-top: 8px;
      font-size: 12px;
      font-weight: 400;
      color: #333333;
    }
    .info-detail-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-text {
        width: 80%;
      }
      .btn {
        width: 50px;
        height: 14px;
        background: #2b60ff;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        color: #ffffff;
      }
    }

    .tips-box {
      padding-top: 17px;
      .tips-title {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        color: #333333;
        line-height: 17.5px;
        .nut-icon {
          margin-right: 6px;
        }
        .tips-title-icon {
          width: 14px;
          height: 14px;
          margin-right: 6px;
        }
      }
      .tips-detail {
        padding-left: 18px;
        font-size: 11px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        color: #666666;
        line-height: 17.5px;
      }
    }

    .matter-box {
      width: 100%;
      .tabs {
        min-width: 100vw;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #333333;
        .tabs-item {
          display: flex;
          flex-direction: column;
          margin-right: 20px;
          padding: 10px 0;
          align-items: center;
          .line {
            width: 30px;
            height: 2.5px;
            background: #ffffff;
            border-radius: 1.5px;
            margin-top: 5px;
          }
          .line1 {
            background: linear-gradient(180deg, #2a5cff 0%, #3581ff 100%);
          }
        }
      }
      .mainBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .videoBox {
          width: 74.5px;
          height: 114.5px;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
    }
    .task-detail {
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #333333;
      // line-height: 20px;
      image {
        min-width: 100vw;
        height: auto;
      }
    }
  }

  .footer-box {
    width: 335px;
    height: 45px;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: content-box;
    justify-content: space-between;
    box-shadow: -1px 0 5px #E5E5E5;
    .f-menu {
      display: flex;
      align-items: center;
      width: 98px;
      margin-right: 10px;
      .f-menu-item {
        min-width: 25px;
        max-width: 40px;
        display: flex;
        flex-direction: column;
        font-size: 10.5px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        color: #333333;
        align-items: center;
        background: transparent;
        padding: 0!important;
        .nut-icon {
          margin-bottom: 2px;
        }
      }
    }
    .btns {
      min-width: 227px;
      height: 36px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 1.5px;
    }
  }
}
// .suggest-box {
//   .title {
//     width: 100%;
//     display: flex;
//     justify-content: center;
//     font-size: 12px;
//     color: #666666;
//     padding: 16px 0;
//   }
//   .list {
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     flex-wrap: wrap;
//     padding: 0 4px;
//     box-sizing: border-box;
//   }
// }
